<template>
  <div class="factory_order table-theme">
    <head-title title="订单--工厂订单"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <tabs-view
            :list="classifyList"
            :tabsIndex="type"
            @roleType="roleType"
          ></tabs-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <p class="data-number">共{{ total }}条数据</p>
      <el-table :data="orderList" stripe>
        <el-table-column
          label="序号"
          align="center"
          prop="order_id"
        ></el-table-column>
        <el-table-column
          label="订单号"
          align="center"
          prop="order_sn"
        ></el-table-column>
        <el-table-column
          label="收货人"
          align="center"
          prop="accept_name"
        ></el-table-column>
        <el-table-column
          label="电话"
          align="center"
          prop="mobile_phone"
        ></el-table-column>
        <el-table-column
          label="金额"
          align="center"
          prop="goods_factory_price"
        ></el-table-column>
        <el-table-column
          label="物流地址"
          align="center"
          prop="address"
        ></el-table-column>
        <el-table-column
          label="物流商品"
          align="center"
          prop="goods_name"
        ></el-table-column>
        <el-table-column
          label="下单时间"
          align="center"
          prop="add_times"
          min-width="125"
        ></el-table-column>
        <el-table-column
          label="物流方向"
          align="center"
          prop="factory_direction"
        ></el-table-column>
        <el-table-column
          label="运费方式"
          align="center"
          prop="freight_direction"
        ></el-table-column>
        <el-table-column
          label="预计交货日期"
          align="center"
          prop="estimate_time"
          min-width="125"
        ></el-table-column>
        <el-table-column
          label="总部通知发货时间"
          align="center"
          prop="notice_time"
          min-width="125"
        ></el-table-column>
        <el-table-column
          label="订单状态"
          align="center"
          prop="status_text"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <div class="operate">
              <el-button
                type="primary"
                size="mini"
                @click="
                  exportExcel(
                    scope.row.order_id,
                    scope.row.factory_sn,
                    scope.row.factory_move
                  )
                "
                >导出</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="goOrderDetails(scope.row.order_id)"
                >详情</el-button
              >
              <el-button
                type="danger"
                size="mini"
                v-if="scope.row.status == 7"
                @click="confirmOrder(scope.row.order_sn, scope.row.factory_sn)"
              >
                工厂确认
              </el-button>
              <el-button
                type="primary"
                size="mini"
                v-if="(scope.row.produce_status == 0 || scope.row.produce_status == 1) && scope.row.status != 7"
                @click="produceComplate(scope.row)"
              >
                生产完成
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 工厂确认弹框 -->
    <el-dialog
      title="厂家确认"
      :visible.sync="factoryDialog"
      center
      :modal-append-to-body="false"
      width="680px"
    >
      <el-form :model="factoryForm" :rules="factoryFormRules" ref="factoryForm">
        <div class="info-exhibition">
          <el-form-item label="预计交货日期：:" prop="complete_time">
            <el-date-picker
              v-model="factoryForm.complete_time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="factoryDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick('factoryForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TabsView from "@/components/TabsView";
export default {
  name: "factory_order",
  components: {
    TabsView,
  },
  data() {
    return {
      factory_sn: localStorage.getItem("factory_sn"),
      admin_id: localStorage.getItem("admin_id"),
      order_sn: "", // 订单号
      factoryDialog: false, // 厂家确认弹框
      factoryForm: {
        complete_time: "",
      },
      factoryFormRules: {
        complete_time: [{ required: true, message: "请选择日期" }],
      },
      refresh: false,
      orderList: [], // 订单列表
      total: 0,
      totalData: 0,
      type: 0,
      page: 0,
      classifyList: ["全部","待发货" ,"待收货" ,"已成交" ,"待确认" ],
      selectModel: {
        time: "", // 时间
      },
      searchOption: [
        {
          value: 0,
          label: "订单号",
        },
      ],
      classSelect: 0,
      selectContent: "",
    };
  },
  methods: {
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 10,
        goods_store_id: localStorage.getItem("shop_id"),
        factory_sn: this.factory_sn,
      };

      // 1订单编号
      if (this.classSelect == 0) {
        data.order_sn = this.selectContent;
      }

      // type 0全部 1待发货 2待收货 3已成交 4已取消 5 待工厂确认
      switch (this.type) {
        case 0:
          data.status = "3,4,5,6,7";
          break;
        case 1:
          data.status = "3";
          break;
        case 2:
          data.status = "4";
          break;
        case 3:
          data.status = "5";
          break;
        // case 4:
        //   data.status = "6";
        //   break;
        case 4:
          data.status = "7";
          break;
      }

      this.$http(this.$ApiList.FactoryOrderList, data).then((res) => {
        this.orderList = [];
        res.datas.data.forEach((item) => {
          if (item.express_move == 1) {
            item.direction = item.address_id.city + item.address_id.district;
          } else if (item.express_move == 2) {
            item.direction = item.express_address;
          } else if (item.express_move == 3) {
            item.direction = "送到平台";
          }

          let factory = ["", "客户物流", "客户地址", "平台物流"];
          item.factory_direction = factory[item.factory_move];

          let freight = ["", "线上支付", "货到付款"];
          item.freight_direction = freight[item.factory_type];

          let status = [
            "待付款",
            "待商家确认",
            "待平台确认",
            "待发货",
            "待收货",
            "已成交",
            "已取消",
          ];
          item.status_text = status[item.status];

          item.logistics_imgList = [item.logistics_img];
          this.orderList.push(item);
        });

        this.total = res.datas.count;
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    roleType(index) {
      this.type = index;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.type = 0;
      this.selectContent = "";
      this.classSelect = 0;
      this.init();
    },
    selectTime() {
      this.init();
    },
    goOrderDetails(id) {
      this.$router.push({ path: "/order_details", query: { id: id } });
    },
    // 确认按钮
    confirmOrder(order_sn, factory_sn) {
      this.order_sn = order_sn;
      this.factory_sn = factory_sn;
      this.factoryDialog = true;
    },
    //提交
    confirmClick(formName) {
      // type 0 平台备注 1工厂确认 2平台确认 3商家确认
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.factoryForm.order_sn = this.order_sn;
          this.factoryForm.factory_sn = this.factory_sn;
          console.log(this.factoryForm);
          this.$http(this.$ApiList.OrderFactoryConfirm, this.factoryForm).then(
            (res) => {
              if (res.code == 200) {
                this.$layer.msg("确认成功");
                this.factoryDialog = false;
                this.init();
              }
            }
          );
        } else {
          this.$layer.msg("请填写完整信息后提交");
        }
      });
    },
    // 工厂导出订单
    exportExcel(order_id, factory_sn, factory_move) {
      let url =
        `${this.$domain}furniture/Adminexcel/FactoryGetDataExcel?order_id=` +
        order_id +
        "&factory_sn=" +
        factory_sn +
        "&factory_move=" +
        factory_move;
      window.location.href = url;
    },
    produceComplate(row){
			this.$confirm('您确定当前产品生产完成吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http(this.$ApiList.ProduceConfirm,{order_sn: row.order_sn,factory_sn: localStorage.getItem('factory_sn') }).then(res => {
					if(res.code == 200){
						this.$layer.msg('操作成功')
						this.init()
					}
				})
			}).catch(() => {

			});
		},
  },
  created() {
    this.init();
  },
};
</script>
<style>
.factory_order .tableLimit tr td .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*可以显示的行数，超出部分用...表示 */
  -webkit-box-orient: vertical;
}
/* 数据筛选 */
.factory_order .data-filtering-view {
  display: flex;
  flex-direction: row-reverse;
}

.factory_order .data-filtering-view .select-view {
  margin-left: 10px;
  margin-right: 5px;
}
/* 自定义输入框样式 */
.factory_order
  .data-filtering-view
  .input-with-select
  .el-input-group__prepend {
  width: 140px;
  background-color: #fff;
}
.factory_order
  .data-filtering-view
  .input-with-select
  .el-input__inner:nth-child(2) {
  width: 170px;
  padding-right: 15px;
}

/* 数据筛选 -end*/

.factory_order .info-exhibition p {
  padding-left: 10px;
  line-height: 30px;
  margin-bottom: 20px;
}

</style>
